<template>
  <div class="login-container">
    <div class="title">
      <div>
        <div class="img"><img src="@/assets/logo.png" alt="" srcset="" /></div>
        <div class="text">闵行区绿化市容行业信息化平台</div>
      </div>
    </div>
    <div class="containerBox">
      <div class="tab">
        <div class="tab1">欢迎登录</div>
      </div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="left">
        <el-form-item prop="username" style="margin-top: 28px">
          <span class="svg-container">
            <img src="@/assets/icon/i.png" alt="" srcset="" />
          </span>
          <el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" />
        </el-form-item>
        <el-form-item prop="password" style="margin-top: 20px">
          <span class="svg-container">
            <img src="@/assets/icon/password1.png" alt="" srcset="" />
          </span>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            show-password
            placeholder="密码"
            name="password"
            tabindex="2"
            @keyup.enter.native="login()"
          />
        </el-form-item>
        <!-- <div class="radio">
          <el-radio v-model="radio" label="1">记住密码</el-radio>
        </div> -->
        <el-button :loading="loading" type="primary" class="login_btn" @click.native.prevent="login()">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form>
    </div>
    <Vcode :show="isShow" @success="success" @close="close" :imgs="puzzleImgList" @fail="fails" />
  </div>
</template>
<script>
import Vcode from 'vue-puzzle-vcode' //先安装 npm install vue-puzzle-vcode --save
// import { Login } from '@/http/api/login'
import { getToken } from '@/utils/auth'

export default {
  name: 'AboutView',
  components: {
    Vcode
  },
  data() {
    return {
      radio: false,
      isShow: false,
      photoHua: 0, //图片滑动验证的错误次数
      puzzleImgList: [
        require('@/assets/login/1.jpg'),
        require('@/assets/login/2.jpg'),
        require('@/assets/login/3.jpg'),
        require('@/assets/login/4.jpg'),
        require('@/assets/login/5.jpg'),
        require('@/assets/login/6.jpg'),
        require('@/assets/login/7.jpg'),
        require('@/assets/login/8.jpg'),
        require('@/assets/login/9.jpg'),
        require('@/assets/login/10.jpg')
      ],
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入账号'
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入密码'
          }
        ]
      },
      passwordType: '',
      loading: false
    }
  },
  methods: {
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.isShow = true
        }
      })
    },
    //******************************当前验证插件***********************************
    // 成功的回调
    success() {
      //获取地址栏参数
      function getUrlParams(param) {
        var url = window.location.href
        var res = null
        if (url.indexOf('?') != -1) {
          var a = url.split('?')[1]
          var urlParams = new URLSearchParams(a)
          res = urlParams.get(param)
        }
        return res
      }
      //************************************************************************** */
      this.isShow = false // 通过验证后，需要手动隐藏模态框
      this.loading = true
      this.$store
        .dispatch('user/login', this.loginForm)
        .then((res) => {
          this.loading = false
          if (res.code == 0) {
            //获取url地址中是否有子系统，如果有，则登录后直接跳转到子系统中
            var url = getUrlParams('url') || null
            if (url) {
              const token = getToken()
              window.location.replace(url + '?token=' + token)
            } else {
              this.$router.push({ path: '/' }).catch(() => {})
            }
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    //失败的回调，失败的逻辑是，用户失败指定次数之后，加入弹窗提示信息
    fails() {
      this.photoHua += 1
      if (this.photoHua > 5) {
        this.$message({
          message: '其实ψ(*｀ー´)ψ......你要是一直拼不成功，我会让你一直拼下去的哟...',
          type: 'warning'
        })
      }
    },
    //点击图片验证的背景部分事件
    close() {
      this.$message({
        message: '请完成滑动验证，验证成功之后验证框会自动消失...(๑╹◡╹)ﾉ',
        type: 'warning'
      })
    }
  }
}
</script>
<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg: #283443;
$light_gray: #fff;
$cursor: #000;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

.login-container .el-input input {
  color: #000 !important;
  font-size: 18px;
}

/* reset element-ui css */
.login-container {
  position: relative;
  width: 100%;
  height: 100%;
  // background-color: $bg;
  background: url('@/assets/loginbg.png');
  background-size: 100% 100%;

  .title {
    width: 686px;
    height: 61px;
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translateX(-50%);
    > div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .img {
      width: 76px;
      height: 76px;
      margin-right: 20px;
    }
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
    .text {
      width: 610px;
      height: 56px;
      font-size: 38px;
      font-weight: 700;
      letter-spacing: 2px;
      color: rgba(23, 131, 245, 1);
    }
  }

  .containerBox {
    position: absolute;
    box-sizing: border-box;
    width: 540px;
    height: 446px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 40px 70px;

    .tab {
      width: 100%;
      height: 38px;
      display: flex;
      justify-content: center;

      .tab1 {
        min-width: 104px;
        height: 100%;
        font-size: 26px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 37.65px;
        color: rgba(128, 141, 157, 1);
        //border-bottom: 2px solid rgba(128, 141, 157, 1);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .tab2 {
        display: flex;
        justify-content: center;
        align-items: center;
        left: 1070px;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 26.06px;
        color: rgba(191, 191, 191, 1);
      }
    }

    .el-form-item {
      //border: 2px solid rgba(94, 167, 255, 1);
      // background: rgba(0, 0, 0, 0.1);
      //border-radius: 30px;
      color: #454545;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60px;
      width: 100%;
      margin-bottom: 0;
      border-bottom: 2px solid rgba(166, 166, 166, 0.3);

      .el-form-item__content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .el-input {
          width: 345px;
          height: 100%;
          display: flex;
          align-items: center;

          .el-input__inner {
            width: 345px;
            border: 0;
          }
          .el-input__inner::placeholder {
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0px;
            color: rgba(166, 166, 166, 1);
          }
        }
      }

      .svg-container {
        width: 24.15px;
        height: 26px;
        margin: 17px 10px 17px 20px;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      cursor: pointer;
      user-select: none;
    }

    .login_btn {
      width: 100%;
      height: 64px;
      opacity: 1;
      border-radius: 10px;
      background: rgba(23, 131, 245, 1), linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
      font-size: 24px;
      font-weight: 500;
      letter-spacing: 5px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: center;
      margin-top: 40px;
    }
  }
}
</style>
